<template>
	<q-card class="fit q-mt-md">
		<q-card-section class="row justify-between no-wrap">
			<view class="row q-gutter-md">
				<a-ziduan :编辑="取编辑(单项)" :单项="单项" 字段名="客户" :ref="(el) => setInputRef(el, 单项)" :可添加="true"
					:候选值="设置.客户组" />
				<a-ziduan :编辑="取编辑(单项)" :单项="单项" 字段名="状态" />
				<a-ziduan :编辑="取编辑(单项)" :单项="单项" 字段名="开台时间" 类型='time' hide-second />
				<a-ziduan :编辑="取编辑(单项)" :单项="单项" 字段名="结账时间" 类型='time' hide-second />
				<q-btn size="sm" label="现在" @click="现在()" dense v-if="取编辑(单项)" />
				<a-ziduan :编辑="取编辑(单项)" :单项="单项" 字段名="时长" 类型='时长' width="150" />
				<a-ziduan :编辑="取编辑(单项)" :单项="单项" 字段名="台球费" 类型='人民币' width="150" />
				<q-space></q-space>
				<a-ziduan :编辑="取编辑(单项)" :单项="单项" 字段名="总费用" 类型='人民币' 内容类="text-red text-h6" />
				<a-ziduan :编辑="取编辑(单项)" :单项="单项" 字段名="收款" 类型='人民币' v-if="单项.状态=='完成'" />
			</view>
			<q-separator vertical inset />
			<view class="q-gutter-y-md column a-w-75 flex-center q-pl-sm">
				<button type="primary" @click="store.予编辑(单项)" size="mini" plain v-if="!取编辑(单项)">改</button>
				<button type="primary" @click="store.确定(单项)" size="mini" plain v-if="取编辑(单项)">✔</button>
				<button type="primary" @click="inputDialogToggle" size="mini" plain>结账</button>
				<button type="warn" @click="store.删(单项)" size="mini" plain>删</button>
				<button type="warn" @click="store.改(单项)" size="mini" plain>存</button>

			</view>
		</q-card-section>
		<q-expansion-item class="row fit">
			<template v-slot:header>
				<view class="row flex-center full-width">
					<view class="q-pr-sm text-primary">
						其他商品小计：
					</view>
					{{单项.其他商品小计}}
				</view>
			</template>
			<view class="明细 column q-gutter-y-xs q-px-md">
				<zibiao :单项组="单项.明细"></zibiao>
			</view>
		</q-expansion-item>
	</q-card>

	<!-- 输入框弹窗 -->
	<uni-popup ref="inputDialog" type="dialog">
		<uni-popup-dialog ref="inputClose" mode="input" title="确认结账" v-model.number="结账内容" placeholder="请输入结账金额"
			@confirm="dialogInputConfirm"></uni-popup-dialog>
	</uni-popup>
</template>

<script setup>
	import { computed, ref, watch, watchEffect } from "vue"
	import { useDebounceFn } from '@vueuse/core';

	import * as util from '@/amtf/utils'
	import zibiao from "./子表.vue"
	const props = defineProps({
		单项: {
			type: Object,
			default: {}
		},
		store: {
			type: Object,
			default: {}
		},
	});

	const { 单项 } = props
	// console.log('订单 单项: ', 单项);
	const { setInputRef, 取编辑 } = props.store

	import useshezhistore from "@/stores/shezhi-store"
	const shezhi = useshezhistore()
	const { a: 设置 } = shezhi

	const inputDialog = ref(null)
	const inputClose = ref(null)
	const 结账内容 = ref(0)

	function inputDialogToggle() {
		结账内容.value = 单项.总费用
		inputDialog.value.open()
	}

	function dialogInputConfirm(val) {
		console.log('输入的 val: ', val);
		单项.收款 = val
		单项.状态 = "完成"
		inputDialog.value.close()
	}

	function 现在() {
		// console.log('现在 单项: ',单项);
		单项.结账时间 = Date.now()
	}

	function 成其他商品小计() {
		// console.log("成其他商品小计 ing");
		let res = 单项.明细.reduce((sum, item) => {
			return sum + (item.小计 || 0)
		}, 0)
		res = util.数值圆整(res, 2)
		单项.其他商品小计 = res
		return res
	}
	// computed()

	watch(
		[() => 单项.开台时间, () => 单项.结账时间],
		(newValue, oldValue) => {
			// console.log('时间变化 单项: ', 单项);
			const 开台时间 = 单项.开台时间;
			if (!util.是时间(开台时间)) return 单项.时长 = 0;

			const 结账时间 = 单项.结账时间;
			if (!util.是时间(结账时间)) return 单项.时长 = 0;

			const 时长 = (结账时间 - 开台时间) / (1000 * 60);
			// console.log('时长: ', 时长);
			单项.时长 = util.数值圆整(时长);
		}
	);

	// 计算开台费
	watch(
		[() => 单项.时长],
		(newValue, oldValue) => {
			let 时长 = 单项.时长
			// const 最小计费分钟数 = 20
			const 最小计费分钟数 = 设置.最小计费分钟数
			时长 = util.向上取整(时长, 最小计费分钟数)
			// console.log('圆整时长: ', 时长);
			// const 每小时台球费 = 50
			const 每小时台球费 = 设置.每小时台球费
			const 每分钟台球费 = 每小时台球费 / 60
			const 台球费 = 时长 * 每分钟台球费;
			单项.台球费 = util.数值圆整(台球费);
		}
	);

	const 存库 = useDebounceFn(
		async () => {
				const res = await props.store.改(单项);
			},
			300, // 防抖延迟时间(毫秒)
			{
				leading: false, // 不立即执行
				trailing: true, // 延迟后执行
			}
	);

	watch(
		单项,
		async (newValue, oldValue) => {
			成其他商品小计()
			单项.总费用 = (单项.台球费 || 0) + (单项.其他商品小计 || 0)
			存库();
		}
	);

	// watchEffect(() => {
	// 	// 成其他商品小计()
	// 	// console.log('计算总费用 单项: ',单项);
	// 	// console.log('单项.台球费: ',单项.台球费);
	// 	// console.log('单项.其他商品小计: ',单项.其他商品小计);
	// 	单项.总费用 = (单项.台球费 || 0) + (单项.其他商品小计 || 0)
	// 	// console.log('单项.总费用: ',单项.总费用);
	// })
</script>

<style>

</style>